// useWebSocket.ts
import { onUnmounted, ref } from 'vue';

export default function useWebSocket(url: string) {
  const ws = ref<null | WebSocket>(null); // WebSocket 实例
  const pingInterval = ref<null | ReturnType<typeof setInterval>>(null); // 心跳检测定时器
  const isConnected = ref<boolean>(false); // 连接状态
  const messages = ref<any>(null); // 存储接收到的消息
  const socket_id = ref<string>(''); // 存储 socket_id

  // 连接 WebSocket
  const connect = (cd: () => any) => {
    if (!window.WebSocket) {
      console.error('您的浏览器不支持 WebSocket');
      return;
    }

    ws.value = new WebSocket(url);

    // 连接打开时的回调
    ws.value.addEventListener('open', () => {
      isConnected.value = true;
      // eslint-disable-next-line no-console
      console.log('WebSocket 已连接');
      ping();
      cd && cd();
      // 发送初始化消息（如果需要）
      // ws.value?.send('初始化消息');
    });

    // 接收到消息时的回调
    ws.value.addEventListener('message', (event: MessageEvent) => {
      const jsonData = JSON.parse(event.data);
      // console.log('接收到消息:', jsonData, jsonData === null);
      // if (jsonData !== null) {
      //   messages.value = jsonData;
      // }
      if (Array.isArray(jsonData)) {
        messages.value = jsonData;
      }

      // 在此处理接收到的消息
    });

    // 连接关闭时的回调
    ws.value.addEventListener('close', () => {
      isConnected.value = false;
      // eslint-disable-next-line no-console
      console.log('WebSocket 已关闭');
      // 在此处理连接关闭的逻辑
    });

    // 发生错误时的回调
    ws.value.addEventListener('error', (error: Event) => {
      console.error('WebSocket 发生错误:', error);
      // 在此处理错误的逻辑
    });
  };

  // 发送消息的方法
  const sendMessage = (message: string) => {
    if (ws.value && ws.value.readyState === WebSocket.OPEN) {
      ws.value.send(message);

      // console.log('已发送消息:', message);
      socket_id.value = JSON.parse(message).id;
    } else {
      console.error('WebSocket 未连接或已关闭');
    }
  };

  // 关闭连接的方法
  const closeConnection = () => {
    if (ws.value) {
      ws.value.close();
      // eslint-disable-next-line no-console
      console.log('已关闭 WebSocket 连接');
    } else {
      console.error('WebSocket 实例不存在');
    }
  };

  // 心跳检测
  const ping = () => {
    pingInterval.value = setInterval(() => {
      if (ws.value && ws.value.readyState === WebSocket.OPEN) {
        // 发送心跳消息，内容格式需与后端协商（例如JSON）
        ws.value.send(
          JSON.stringify({ id: socket_id.value, op: 'web.ping', value: '' }),
        );
        // console.log('Sent ping');
      }
    }, 50_000);
  };

  // 在组件卸载时关闭连接
  onUnmounted(() => {
    if (pingInterval.value) {
      clearInterval(pingInterval.value);
      // eslint-disable-next-line no-console
      console.log('Heartbeat cleared');
    }
    if (ws.value) {
      ws.value.close();
      // eslint-disable-next-line no-console
      console.log('组件卸载前已关闭 WebSocket 连接');
    }
  });

  return {
    ws,
    ping,
    connect,
    isConnected,
    messages,
    sendMessage,
    closeConnection,
  };
}
